/*
* @Author: Wangxi
* @Date: 2023-06-03 15:04:12
* @LastEditors: Yejing
* @LastEditTime: 2023-06-12 10:10:49
* @Description: 首页
*/
<template>
	<view class="home-container" :style="{'overflowY':menuListPoups?'hidden':'','height':menuListPoups?'0rpx':''}">
		<c-navigation-bar :is-search="true" :is-fixed="true" leftIcon="" searchBorder="#E8E6EA" searchBgcolor=""
			@inputClick="inputClick" @searchEvent="inputClick" :navbarBgColor="navBar.bgColor" :input="navBar.input">
			<template slot="left-icon" v-if="token">
				<u-image @click="menuClick" width="40" height="50" :src="navBar.img"></u-image>
			</template>
		</c-navigation-bar>
		<view class="home-main">
			<u-swiper :height="630" :list="swiperList" interval='5000' name='img' @click="clickSwiper"></u-swiper>
			<view class="home-body">
				<view class="home-notices is_padding_40">
					<notice :noticeList='notice.list' :interval="3000" @clickNotice="clickNotice"
						@clickNoticeList='clickNoticeList'>
					</notice>
				</view>
				<!-- 分类 -->
				<view class="style-for-you is_padding_40">
					<homeScrollView :title='$t("home.Classification")'
						@handleClick="handleClick1('/pages/classifySeckill/classifySeckill')" :handelName='$t("home.showAll")'>
						<scroll-view :scroll-x="true" style="white-space: nowrap;height: 250rpx;">
							<view>
								<view class="menu">
									<view class="scroll-item" v-for="(item,index) in typeList" @click="typeClick(item,index)"
										:key="item.id">
										<view>
											<view class="type-img-box">
												<image style="width: 160rpx;height: 160rpx;" :src="$u.file.getMedieUrl(item.image)"></image>
											</view>
											<view class="foot-name">
												{{ item.name }}
											</view>
										</view>
									</view>
								</view>
							</view>

						</scroll-view>

						<image style="height: 20rpx;width: 20rpx;" slot="icon" src="@/static/svg/right-arrows.svg" mode=""></image>
					</homeScrollView>
				</view>
				<view class="" style="margin: 40rpx 0;" v-if="advertisingList.length>0">
					<u-swiper :height="260" :list="advertisingList" interval='5000' img-mode="" name='imgUrl'
						@click="clickSwiper_advertising"></u-swiper>
				</view>


				<!-- 推荐 -->
				<view class="goods-box">
					<view class="title">
						{{$t('product.recommendCommodities') }}

					</view>
					<scroll-view :scroll-x="true" style="white-space: nowrap">
						<view class="reviews-main">
							<productCard :details="{...item,h:280}" v-for="item in recommendGoodList" :key="item.id"
								@click="goProductDetail(item)">
							</productCard>
						</view>
					</scroll-view>
				</view>

				<!-- 开售倒计时 -->
				<view class="sale-starts" v-if="countDown>0">
					<view class="title">
						<u-image :src="require('@/static/images/bgIcon.png')" alt=""
							style='width: 17rpx;height: 26rpx;margin-right: 10rpx;' />
						{{seckillTitle}}
					</view>
					<u-count-down :timestamp="countDown" font-size="34" bgColor="#35E8F7" color="#2934D0" border-color="#909399"
						height="80"></u-count-down>

				</view>
				<!-- 商品秒杀 -->
				<view class="lightning-deals" v-if="countDown>0">
					<homeScrollView :title='$t("home.LightningDeals")' @handleClick="handleClick('/pages/seckill/seckill')"
						:handelName='$t("home.showAll")'>
						<scroll-view scroll-x="true">
							<view class="scroll-item" v-for="(item,index) in goodList" :key="index">
								<productCard @click="goSeckillProductDetails(item)" style="width: 220rpx"
									:details="{...item,h:280,goodsName:item.name,image:item.images}"></productCard>
							</view>
						</scroll-view>
						<image style="height: 20rpx;width: 20rpx;" slot="icon" src="@/static/svg/right-arrows.svg">
						</image>
					</homeScrollView>
				</view>
				<!--  -->
				<!-- 		<view class="anchor">
					<image style="width: 100%;height: 280rpx;" src="@/static/images/home/rectangle.png" mode=""></image>
					<button type="default">
						<text>View Now</text>
					</button>
				</view> -->
				<!-- 商品和商店 -->
				<view class="product-store">

					<view class="product-store-tabs">
						<view class="tabs-group">
							<view :class="['tab',current1 == 'synthetical' ? 'active-tab' : '']"
								@click="currentEvent_two('synthetical')">
								{{$t('storeManagement.synthetical')}}
							</view>

							<view :class="['tab',current1 == 'Sales' ? 'active-tab' : '']" style="display: flex;align-items: center;">

								<view class="" @click="currentEvent_two('Sales')">
									{{$t('storeManagement.Sales')}}
								</view>

								<view class="" style="margin-left: 8rpx;">
									<u-icon name="arrow-up" :color="sort=='SalesUp'?'#000':'#ccc'" size="20" style="display: block;"
										@click="currentEvent_two('Sales','SalesUp')"></u-icon>
									<u-icon name="arrow-down" :color="sort=='SalesUpDown'?'#000':'#ccc'" size="20" style="display: block;"
										@click="currentEvent_two('Sales','SalesUpDown')"></u-icon>
								</view>

							</view>
							<view :class="['tab',current1 == 'new' ? 'active-tab' : '']" @click="currentEvent_two('new')">
								{{$t('storeManagement.new')}}
							</view>
							<view :class="['tab',current1 == 'price' ? 'active-tab' : '']" style="display: flex;align-items: center;">

								<view class="" @click="currentEvent_two('price')">
									{{$t('storeManagement.price')}}
								</view>

								<view class="" style="margin-left: 8rpx;">
									<u-icon name="arrow-up" :color="sort=='up'?'#000':'#ccc'" size="20" style="display: block;"
										@click="currentEvent_two('price','up')"></u-icon>
									<u-icon name="arrow-down" :color="sort=='down'?'#000':'#ccc'" size="20" style="display: block;"
										@click="currentEvent_two('price','down')"></u-icon>
								</view>

							</view>
						</view>

						<!-- 			<scroll-view class="type-tags" scroll-x="true">
							<view :class="`${activeTypeTagKey === item.id?'is-active':''}`"
								v-for="(item , index) in typeTagsList" :key="item.id" @click="typeTagChange(item.id)">
								{{ item.name }}
							</view>

						</scroll-view> -->
						<view class="panes">
							<view class="product-pane" v-show="activeTabsName === 'product'" label="商品" name="product">
								<!-- 瀑布流组件 -->
								<waterfallView>
									<view class="item" v-for="(item, index) in productList" :key="index">
										<productCard :details="item" @click="goProductDetail(item)"></productCard>
									</view>
								</waterfallView>
							</view>
							<!-- 	<view class="store-pane" v-show="activeTabsName === 'store'" label="商店" name="store">
								<view class="store-box">
									<view v-for="(item, index) in storeList" :key="index">
										<storeCard :storeDetails="item"></storeCard>
									</view>
								</view>
							</view> -->
						</view>
					</view>
					<!-- <homeTabs></homeTabs> -->
				</view>
				<!-- 线下理财 -->
				<!-- 取消主页线上下理财 -816 w -->
				<view class="financial-management" v-if="false">
					<view class="title">
						{{$t("home.FinancialManagement")}}
					</view>
					<view class="financial-box">
						<view class="online" @click="financialGo('online')">
							<imageForSize w="100%" h="100%"
								:src="require('@/static/images/home/lQLPJyFEWy0s_ajMxM0BSrAVXGuMWDKxXQS8FfZIwKkB_330_196.png')" />
							<view class="financial-title">
								{{$t("home.OnlineFinance")}}
							</view>

						</view>
						<view class="offline" @click="financialGo('offline')">
							<imageForSize w="100%" h="100%"
								:src="require('@/static/images/home/lQLPJx1lAcZe3ajMxM0BSrCRu9xxI-XRwAS8FfZIwKkA_330_196.png')">
							</imageForSize>
							<view class="financial-title">
								{{$t("home.OfflineFinance")}}
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <c-tabbar /> -->
		<menuList :uPopupShow.sync="menuListPoups"></menuList>

		<!-- 轮播图富文本 -->
		<u-popup v-model="storyshow" mode="center" width="80%" border-radius="40">
			<scroll-view scroll-y="true" style="height: 85%;">
				<view class="popcontentBox">
					<view>
						<view class="" style="text-align: center;font-size: 16px;font-weight: bold;margin: 10px 0;">
						</view>
						<u-parse :html="story.detail"></u-parse>
					</view>
				</view>

			</scroll-view>

			<view class="bottom">
				<button type="default" @click="storyshow=false" style="height: 50px;">{{$t('liveBar.off')}}</button>
			</view>
		</u-popup>

		<!-- 广告弹窗 -->
		<u-popup v-model="advertisementShow" :mask-close-able='false' mode="center" width="80%"  border-radius="40">
			<scroll-view scroll-y="true" style="height: 85%;">
				<view class="popcontentBox" style="min-height: 400px;" @click="clickSwiper_advertising()">
					<view>
						<view class="" style="text-align: center;margin-bottom: 40px;">
							{{advertisement.title}}
						</view>
						<view class="" style="text-align: center;font-size: 16px;font-weight: bold;margin: 10px 0;">
						</view>
						<image style="width: 100%; height: 260px;" referrerpolicy="no-referrer"
							:src="$u.file.getMedieUrl(advertisement.cover)" />
					</view>

				</view>


			</scroll-view>
			<view class="bottom">
				<button type="default" @click="closedAdvertisement()" style="height: 50px;">{{$t('liveBar.off')}}</button>
			</view>
		</u-popup>
		<view class="robot-box">
			<view class="robot-msg-box">
				<robotMessage></robotMessage>
			</view>
			<view class="robot-img" @click.stop="clickRobot">
				<image src="@/static/images/home/robot.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import notice from "./components/notice.vue"
	import menuList from "./components/menuList.vue"
	import homeTabs from './components/homeTabs.vue'
	export default {
		onTabItemTap(item) {
			console.log(item.index); // 输出当前点击的 TabBar 项的索引
		},
		onPullDownRefresh() {
			console.log(122131221)
			this.getCategory()
			this.getProductList()
			//获取推荐
			this.$u.get(`/app/shopGoodsInfo/productRecommended`).then((res) => {
				console.log("获取推荐", res)
				this.recommendGoodList = res.data

			}, )
			let that = this
			this.$u.get('/app/shopGoodsInfo/category/0').then((res) => {

				this.typeTagsList = res.data
				let key = res.data[0].id
				this.activeTypeTagKey = key
				let data = {
					size: 999,
					current: 1,
					sortType: 1
				}
				that.$u.post('/app/shopGoodsInfo/useraLLpage', data).then((d) => {
					console.log(d);
					that.productList = d.data.records;
				})
			})

			this.$u.post('/app/home/banner/list').then((d) => {
				let arr = []
				arr = d.data
				arr.forEach(i => {
					i.img = this.$u.file.getMedieUrl(i.img)
				})
				this.swiperList = arr
			})
			this.$u.post('/app/seckillActivity/oneActivity', {
				activityLocaltion: 1
			}).then(res => {
				if (res.data.countDown) {
					const t1 = new Date().valueOf()
					let time = t1 - Number(res.data.startTime)
					let time2 = Number(res.data.endTime) - t1

					console.log(this.timestampToTime(Number(res.data.startTime)), this.timestampToTime(Number(res
						.data.endTime)), time)
					if (time < 0) {
						this.seckillTitle = this.$t("home.SALESTARTSIN")
						this.countDown = (-time) / 1000
						uni.setStorageSync('seckillIsStart', 0)
					} else {
						this.seckillTitle = this.$t("home.SalesEndAt")
						this.countDown = (time2) / 1000
						uni.setStorageSync('seckillIsStart', 1)
					}
					this.$u.post('/app/seckillActivity/goodList', {
						activityId: res.data.id,
						size: 10,
						current: 1
					}).then(r => {
						this.goodList = r.data.records
					})
				}
				console.log(this.countDown)
			})
			this.getMessageAjax()
			if (uni.getStorageSync('vuex_token')) {
				// 广告轮播图
				this.$u.post(`/app/advertisement/getAdvertisement`).then((res) => {
					if (res.data.length > 0) {
						this.advertisementShow = true
						this.advertisement = res.data[0]
						this.advertisementList = res.data
						this.advertisementCurrent = 0
					}
				})
			}
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止页面加载动画
			}, 1000);
		},


		components: {
			notice,
			menuList,
			homeTabs
		},
		data() {
			return {
				token: '',
				navBar: {
					input: {
						disabled: false
					},
					bgColor: '',
					img: require('@/static/images/c-navigation-bar/menu-icon-white.png')
				},
				saleImg: require('@/static/images/bgIcon.png'),
				countDown: '',
				seckillTitle: this.$t("home.SALESTARTSIN"),
				menuListPoups: false,
				bottomBorder: false,
				storyshow: false,
				advertisementShow: false,
				advertisement: {},
				advertisementList: [],
				advertisementCurrent: 0,

				story: {
					detail: ''
				},
				systemLocale: '',
				applicationLocale: '',
				bannerList: [{
						imgSrc: '',
						text: '',
						btn: ''
					},
					{
						imgSrc: '',
						text: '',
						btn: ''
					},
					{
						imgSrc: '',
						text: '',
						btn: ''
					},
				],
				typeList: [],
				// 商品列表
				goodList: [],
				// 列表
				paneList: [],
				// 当前tab
				activeTabsName: 'product',
				// 当前分类标签
				activeTypeTagKey: '1',
				// 滑块位置
				slidingBlockLeft: 74.91,
				// 类型标签列表
				typeTagsList: [],
				// 推荐商品
				recommendGoodList: [],
				// 商店列表
				storeList: [{
						storeImg: '../../static/images/home/banner-1.png',
						thumbnail: '../../static/images/home/storeImg.png',
						storeName: 'Store Name',
						introduce: 'Finally, this paper classify the cropping system of Huaihe Watershed..',
						id: '1'
					},
					{
						storeImg: '../../static/images/home/banner-1.png',
						thumbnail: '../../static/images/home/storeImg.png',
						storeName: 'Sport Store',
						introduce: 'Finally, this paper classify the cropping system of Huaihe Watershed...',
						id: '2'
					},
				],
				// 商品列表
				current1: 'synthetical',
				sort: '',
				productList: [],
				//轮播图
				swiperList: [{
					img: require('@/static/images/home/banner-1.png'),
				}, {
					img: require('@/static/images/home/goods.png'),
				}],
				//公告
				notice: {
					data: {
						endDate: "",
						id: "",
						name: "",
						pageNum: 1,
						pageSize: 100000000,
						startDate: "",
					},
					list: []
				},

				advertisingList: [], //广告轮播
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('vuex_token')
			this.$u.post('/app/home/banner/list').then((d) => {
				let arr = []
				arr = d.data
				arr.forEach(i => {
					i.img = this.$u.file.getMedieUrl(i.img)
				})
				this.swiperList = arr
			})
			this.$u.post('/app/seckillActivity/oneActivity', {
				activityLocaltion: 1
			}).then(res => {
				if (res.data.countDown) {
					const t1 = new Date().valueOf()
					let time = t1 - Number(res.data.startTime)
					let time2 = Number(res.data.endTime) - t1

					console.log(this.timestampToTime(Number(res.data.startTime)), this.timestampToTime(Number(res
						.data.endTime)), time)
					if (time < 0) {
						this.seckillTitle = this.$t("home.SALESTARTSIN")
						this.countDown = (-time) / 1000
						uni.setStorageSync('seckillIsStart', 0)
					} else {
						this.seckillTitle = this.$t("home.SalesEndAt")
						this.countDown = (time2) / 1000
						uni.setStorageSync('seckillIsStart', 1)
					}
					this.$u.post('/app/seckillActivity/goodList', {
						activityId: res.data.id,
						size: 10,
						current: 1
					}).then(r => {
						this.goodList = r.data.records
					})
				}
				console.log(this.countDown)
			})
			this.getMessageAjax()

			//获取推荐
			this.$u.get(`/app/shopGoodsInfo/productRecommended`).then((res) => {
				console.log("获取推荐", res)
				this.recommendGoodList = res.data

			}, )
			if (uni.getStorageSync('vuex_token')) {
				// 广告轮播图
				this.$u.post(`/app/advertisement/getAdvertisement`).then((res) => {
					if (res.data.length > 0) {
						this.advertisementShow = true
						this.advertisement = res.data[0]
						 this.advertisementList= res.data
						this.advertisementCurrent = 0
					}
				})
			}

		},
		onReady() {
			this.getCategory()
			this.getProductList()
			let that = this
			let data = {
				size: 999,
				current: 1,
				sortType: 1,
			}
			that.$u.post('/app/shopGoodsInfo/useraLLpage', data).then((d) => {
				// console.log(d);
				that.productList = d.data.records;
			})
			// this.$u.get('/app/shopGoodsInfo/category/0').then((res) => {

			// 	this.typeTagsList = res.data
			// 	let key = res.data[0].id
			// 	this.activeTypeTagKey = key
			// 	let data = {
			// 		size: 20,
			// 		current: 1,
			// 		cateId: key
			// 	}

			// })

		},
		onPageScroll(e) {
			if (e.scrollTop > (this.publicJS.rpxToPx(this.topBannerHeight) - this.publicJS.rpxToPx(140) - this.$store
					.getters.homePageWindowInfo.statusBarHeight)) {
				this.bottomBorder = true;
				this.navBar.bgColor = '#fff'
				this.navBar.img = require('@/static/images/c-navigation-bar/menu-icon-black.png')
			} else {
				this.bottomBorder = false;
				this.navBar.bgColor = ''
				this.navBar.img = require('@/static/images/c-navigation-bar/menu-icon-white.png')


			}
		},
		watch: {
			// 监听消息变化反正有消息推过来了 就加一 产生变化被侦听 再更新
			vuex_receive_message_status: {
				handler(val) {
					if (val) {
						// 此处延迟主要是后端推过来后  消息没有立马存到数据库导致查询不出来
						setTimeout(() => {
							this.getMessageAjax()
						}, 3000)
					}
				},
				depp: true
			}
		},
		computed: {
			topBannerHeight() {
				// 0.618 为黄金比例
				return this.publicJS.pxToRpx(this.$store.getters.homePageWindowInfo.screenWidth * 0.618)
			}
		},
		methods: {
			// 点击机器人
			clickRobot() {
				// console.log('点击机器人',this.vuex_user_info,this.vuex_online_message_list);
				// this.ccount = ~~this.ccount+1
				// this.$u.vuex('vuex_online_message_list',[...this.vuex_online_message_list,{src:this.vuex_user_info.avatar,
				// 	name:this.vuex_user_info.userName,
				// 	time:new Date(),
				// 	id:new Date().getTime(),
				// 	text:'点击机器人触发消息'+ this.ccount }])
				// console.log(this.vuex_online_message_list,'vuex_online_message_listvuex_online_message_list');
			},
			closedAdvertisement() {
				this.advertisementShow = false
				this.advertisementCurrent++
				console.log(this.advertisementCurrent,this.advertisementList[this.advertisementCurrent])
				if (this.advertisementList[this.advertisementCurrent]) {
					setTimeout(() => {
						this.advertisement = this.advertisementList[this.advertisementCurrent]
					}, 1000)
					this.advertisementShow = true
				}

			},
			// 点击轮播图
			clickSwiper(index) {
				let item = this.swiperList[index]
				if (item.type == 1) {
					let id = JSON.parse(item.activityId).id
					let title = JSON.parse(item.activityId).name
					switch (item.activityType) {
						case 0:
							this.$u.route('/pages/productDetails/productDetails', {
								productId: id
							})
							break;
						case 1:
							this.$u.route('pages/user/components/userInfo', {

								userId: id
							})
							break;
						case 2:
							this.$u.route('/pages/shop/index', {
								shopId: id,
							})
							break;
						case 3:
							this.$u.vuex('vuex_video_record', {
								list: [{
									"videoId": id,
									"title": name

								}],
								index: 0,
								show: true
							})
							uni.navigateTo({
								url: "/pages/public/recordVideo/recordVideo",
								"animationType": "slide-in-right",
								"animationDuration": 300
							})
							break;
						case 4:
							this.showDetail(item)
							break;
						default:
							break;
					}


				} else {
					// #ifdef H5
					window.location.href = item.url;
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.openURL(item.url)

					// #endif
				}
			},

			// 点击广告轮播图
			clickSwiper_advertising() {
				let item = this.advertisement
				if (item.type == 1) {
					let id = JSON.parse(item.activityId).id
					let title = JSON.parse(item.activityId).name
					switch (item.activityType) {
						case 0:
							this.$u.route('/pages/productDetails/productDetails', {
								productId: id
							})
							break;
						case 1:
							this.$u.route('pages/user/components/userInfo', {

								userId: id
							})
							break;
						case 2:
							this.$u.route('/pages/shop/index', {
								shopId: id,
							})
							break;
						case 3:
							this.$u.vuex('vuex_video_record', {
								list: [{
									"videoId": id,
									"title": name

								}],
								index: 0,
								show: true
							})
							uni.navigateTo({
								url: "/pages/public/recordVideo/recordVideo",
								"animationType": "slide-in-right",
								"animationDuration": 300
							})
							break;
						case 4:
							this.showDetail(item)
							break;
						default:
							break;
					}


				} else {
					// #ifdef H5
					window.location.href = item.hyperlink;
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.openURL(item.hyperlink)

					// #endif
				}
			},
			// 查看富文本
			showDetail(item) {
				this.story = item
				this.storyshow = true
			},
			// 类型点击
			typeClick({
				id,
				name

			}, index) {
				console.log(id);
				uni.navigateTo({
					url: "/pages/classifySeckill/secondaryClassification?id=" + id
				})
			},
			//商品分类列表
			getCategory() {
				this.$u.get('/app/shopGoodsInfo/categoryAll').then((res) => {

					this.typeList = res.data


				})
			},
			goProductDetail(item) {
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?productId=' + item.id
				})
			},
			// 商品筛选
			currentEvent_two(type, sort = 'up') {
				this.productList = []
				this.current1 = type
				let paging = {
					size: 999,
					current: 1,

				}
				switch (this.current1) {
					case 'synthetical':
						paging.sortType = 1

						break;
					case 'Sales':
						this.sort = sort == 'up' ? 'SalesUp' : sort
						paging.sortType = this.sort == 'SalesUp' ? 5 : 2
						delete paging.new

						break;
					case 'new':
						paging.sortType = 3
						paging.new = true

						break;
					case 'price':
						this.sort = sort
						paging.sortType = this.sort == 'up' ? 7 : 4
						delete paging.new

						break;

					default:
						break;
				}
				this.$u.post('/app/shopGoodsInfo/useraLLpage', paging).then((d) => {
					// console.log(d);
					this.productList = d.data.records;

				})
			},

			//商品分类列表
			getProductList() {
				this.$u.get('/app/shopGoodsInfo/category/0').then((res) => {

					this.paneList = res.data
					console.log(2222, this.paneList);

				})

			},

			onLocaleChange(e) {
				if (this.isAndroid) {
					uni.showModal({
						content: this.$t('index.language-change-confirm'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(e.code);
							}
						}
					})
				} else {
					uni.setLocale(e.code);
					this.$i18n.locale = e.code;
				}
			},
			//
			tabClick(key, event) {
				if (this.activeTabsName === key) return
				this.activeTabsName = key
				// console.log(event);
				// this.slidingBlockLeft = event
				let data = {
					size: 20,
					current: 1,

				}
				this.$u.post('/app/shop/list', data).then((d) => {
					console.log(d);
					this.storeList = d.data.records;
					// console.log(this.storeList);
				})
			},
			// 类型标签切换
			typeTagChange(key) {

				this.activeTypeTagKey = key
				let data = {
					size: 20,
					current: 1,
					cateId: key
				}
				this.$u.post('/app/shopGoodsInfo/useraLLpage', data).then((d) => {
					// console.log(d);
					this.productList = d.data.records;

				})
			},
			//点击input
			inputClick() {
				uni.navigateTo({
					url: '/pages/searchInfo/searchInfo'
				})
			},
			//切换
			switchSvgEvent() {

			},
			//点击公告
			clickNotice(e) {
				uni.navigateTo({
					url: "/pages/myNewsDetails/myNewsDetails?id=" + e.id
				});
			},
			//公告列表
			clickNoticeList() {
				uni.switchTab({
					url: "/pages/myNews/myNews"
				})
			},
			//打开左边弹框
			menuClick() {
				this.$u.init.whetherToLogin(() => {
					this.menuListPoups = true
				})
			},
			// 优惠券点击go
			couponGo() {
				console.log('优惠券！');
			},
			handleClick(url) {
				uni.navigateTo({
					url: url
				})
			},
			handleClick1(url) {
				uni.switchTab({
					url: url
				})
			},
			// 理财点击
			financialGo(key) {
				console.log(key);
				uni.navigateTo({
					url: '/pages/moneyManagement/' + key
				})
			},
			// 查看秒杀商品详情
			goSeckillProductDetails(item) {
				let orderData = JSON.stringify(item);
				let newStr = orderData.replace(/%/g, '%25');
				console.log(item, newStr)
				uni.navigateTo({
					url: `/pages/seckillProductDetails/seckillProductDetails?data=` + encodeURIComponent(newStr),
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},

			timestampToTime(timestamp) {
				// 时间戳为10位需*1000，时间戳为13位不需乘1000
				var date = new Date(timestamp);
				var Y = date.getFullYear() + "-";
				var M =
					(date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1) + "-";
				var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
				var h = date.getHours() + ":";
				var m = date.getMinutes() + ":";
				var s = date.getSeconds();
				return Y + M + D + h + m + s;
			},
			// 获取消息接口
			getMessageAjax() {
				this.$u.post('/app/openSysMessage/messageBySys').then(res => {
					// notice 类型 和 notice_all 类型 都要
					this.notice.list = res.data.filter(f => f.source === 'notice' || f.source ===
						'notice_all').slice(0, 10)

					console.log(this.notice.list, '0000000000000000');
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-container {
		width: 100vw;
		height: 100vh;
		font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;

		.home-top {
			position: fixed;
			width: 100%;
			z-index: 999;
		}

		.tabs-group {
			display: flex;
			position: relative;
			width: 100%;
			justify-content: space-around;

			.tab {
				color: #999CAD;
				font-size: 28rpx;
				margin-right: 40rpx;
				height: 40rpx;
				text-align: center;
			}

			.active-tab {
				color: #000;
				font-weight: bold;
			}

			.tab-active-line {
				position: absolute;
				bottom: 0;
				width: 16rpx;
				height: 6rpx;
				background: #FFFFFF;
				border-radius: 3rpx;
				opacity: 1;
				transform: translate(20rpx, -100%);
				transition-duration: 0.5s;
			}

			.tab-active-new {
				transform: translate(50px, -100%);
			}
		}

		.home-main {
			padding-bottom: 60rpx;

			// 轮播部分
			.home-body {
				padding: 56rpx 30rpx 132rpx 30rpx;
				border-radius: 60rpx;
				background-color: #fff;
				position: relative;
				top: -62rpx;

				.is_padding_40 {
					width: calc(100% - 20rpx);
					margin: 0 10rpx;
				}

				.home-notices {
					height: 92rpx;

					background-color: #fff;
					border-radius: 20rpx;
					background-color: #1b1d29;
				}

				.style-for-you {
					margin-top: 76rpx;

					.menu {
						width: 100%;

						.scroll-item {
							display: inline-block;
							margin-right: 15rpx;
							box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.302);
							border-radius: 18rpx;
							width: 156rpx;
							overflow: hidden;
							height: 250rpx;
							padding-top: 12rpx;
							padding-bottom: 10rpx;

							.type-img-box {
								image {
									display: block;
									width: 100%;
								}
							}

							.foot-name {
								text-align: center;
								font-size: 16rpx;
							}
						}
					}
				}

				.discount-coupon {
					height: 106rpx;
					width: 100%;
					position: relative;
					margin-top: 56rpx;

					.coupon-main {
						height: 98rpx;
						background-color: #191717;
						padding: 16rpx 54rpx 14rpx 16rpx;
						display: flex;

						>view {
							background-color: #fff;
							height: 100%;
						}

						view[class^="dot-"] {
							// position: absolute;
							height: 12rpx;
							width: 12rpx;
							background-color: #191717;
							border-radius: 50%;
						}

						.coupon-left {
							width: 130rpx;
							position: relative;
							display: flex;
							align-items: center;
							padding-left: 10rpx;
							padding-right: 10rpx;
							justify-content: right;
							font-size: 32rpx;
							font-weight: 500;

							// 顶部描述
							.top-des {
								position: absolute;
								top: 0;
								left: 0;
								height: 20rpx;
								background-color: #C8DFE1;
								width: 102rpx;
								padding: 0 10rpx;
								font-size: 16rpx;
								color: #2934D0;

								&::after {
									content: "";
									position: absolute;
									right: 0;
									top: 0;
									border: 10rpx solid transparent;
									border-bottom-color: #fff;
									border-left-color: #fff;
									transform: rotate(-90deg);
								}
							}

							.left-dto {
								height: 100%;
								position: absolute;
								left: 0;
								transform: translate(-50%);
								padding: 10rpx 0;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								z-index: 50;
							}
						}

						.coupon-right {
							flex: auto;
							font-size: 20rpx;
							display: flex;
							align-items: center;
							position: relative;

							.dot-1 {
								position: absolute;
								top: 0;
								transform: translate(-50%, -50%);
							}

							.dot-2 {
								position: absolute;
								bottom: 0;
								transform: translate(-50%, 50%);
							}

							>text {
								padding-left: 10rpx;
							}
						}
					}

					.right-btn {
						top: 0;
						position: absolute;
						right: 0;
						height: 100%;
						width: 112rpx;
						background-color: #191717;
						display: flex;
						align-items: center;
						justify-content: center;

						.right-arc {
							left: 0;
							position: absolute;
							height: 100%;
							width: 32rpx;
							border-radius: 50%;
							transform: translate(-50%);
							background: linear-gradient(black 0%, black 16rpx, white 16rpx, white 85rpx, black 85rpx, black 99rpx, white 90rpx, white 100%),
								linear-gradient(to right, transparent, transparent 50%, white 50%);
						}

						.go-btn {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 68rpx;
							height: 68rpx;
							color: #fff;
							border-radius: 50%;
							background-color: #2934D0;
							font-size: 32rpx;
						}
					}
				}

				.sale-starts {
					margin-top: 76rpx;
					height: 176rpx;
					background-image: url('@/static/images/bgLd.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					opacity: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;

					.title {
						width: 100%;
						font-size: 32rpx;
						font-weight: 400;
						color: #35E8F7;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 20rpx 0 0;
					}
				}

				scroll-view {
					width: 100%;
					// height: 300rpx;
					white-space: nowrap;
				}

				.item1,
				.item2,
				.item3 {
					display: inline-block;
					width: 172rpx;
					height: 228rpx;
				}

				.item1 {
					background-color: #007AFF;
				}

				.item2 {
					background-color: #333333;
				}

				.item3 {
					background-color: #4CD964;
				}

				// 商品
				.lightning-deals {
					margin-top: 56rpx;

					.scroll-item {
						display: inline-block;
						margin-right: 32rpx;

						.goods {
							image {
								width: 220rpx;
								height: 280rpx;
							}

							.foot-name-price {
								padding-top: 8rpx;

								text:first-child {
									font-size: 30rpx;
									font-family: "SFUIDisplay-Regular";
								}

								text:last-child {
									font-size: 28rpx;
								}
							}
						}
					}
				}

				.anchor {
					margin-top: 74rpx;
					position: relative;

					button {
						position: absolute;
						right: 44rpx;
						bottom: 44rpx;
						width: 140rpx;
						height: 50rpx;
						background-color: #35e8f7;
						font-size: 24rpx;
						color: #fff;
						padding: 0;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				// 商品和商店切换
				.product-store {
					margin-top: 76rpx;

					.product-store-tabs {
						.tab-button-box {
							display: flex;
							align-items: flex-end;
							position: relative;
							overflow-x: scroll;

							.tab-button {
								font-size: 32rpx;
								color: #999cad;
								white-space: nowrap;
								position: relative;
								padding-bottom: 10rpx;
								overflow: visible;

								&:not(:last-child) {
									margin-right: 26rpx;
									line-height: 32rpx;
								}

								&.is-active {
									color: #1b1d29;
									font-size: 40rpx;
									line-height: 48rpx;
								}
							}

							.sliding-block {
								position: absolute;
								width: 44rpx;
								height: 8rpx;
								background-color: #F3D099;
								border-radius: 3rpx;
								bottom: 0rpx;
								left: 20rpx;
							}
						}

						.type-tags {
							margin-top: 56rpx;
							white-space: nowrap;

							view {
								display: inline-block;
								background-color: #f8f8f8;
								line-height: 64rpx;
								padding: 0 22rpx 0rpx 12rpx;
								border-radius: 20rpx;
								color: #c9c9c9;

								&:not(:last-child) {
									margin-right: 20rpx;
								}

								&.is-active {
									background-color: #2934d0;
									color: #ffffff;
								}
							}
						}

						.panes {
							padding-top: 26rpx;

							.store-pane {
								.store-box {
									>view:not(:first-child) {
										margin-top: 56rpx;
									}
								}
							}
						}
					}
				}

				// 理财
				.financial-management {
					padding-top: 36rpx;

					>.title {
						height: 48rpx;
						font-size: 40rpx;
						color: #1B1D29;
						line-height: 48rpx;
						font-weight: normal;
					}

					.financial-box {
						display: flex;
						justify-content: space-between;

						>view {
							width: 330rpx;
							height: 196rpx;
							background: #D8D8D8;
							position: relative;
							// margin-right: 40rpx;

							>.financial-title {
								padding: 24rpx 0 0 12rpx;
								font-size: 28rpx;
								position: relative;
								color: #1B1D29;
								height: 132rpx;
							}


							&.online {
								.image-for-size {
									position: absolute;
								}
							}

							&.offline {
								overflow: hidden;

								.image-for-size {
									position: absolute;
								}
							}
						}

					}
				}
			}
		}
	}

	.title {
		font-size: 40rpx;
		font-weight: 400;
		margin-bottom: 15px;
	}

	.description {
		font-size: 14px;
		opacity: 0.6;
		margin-bottom: 15px;
	}

	.detail-link {
		font-size: 14px;
		word-break: break-all;
	}

	.link {
		color: #007AFF;
		margin-left: 10px;
	}

	.locale-setting {
		font-size: 16px;
		font-weight: bold;
		margin-top: 25px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #f0f0f0;
	}

	.list-item {
		font-size: 14px;
		padding: 10px 0;
	}

	.list-item .v {
		margin-left: 5px;
	}

	.locale-item {
		display: flex;
		flex-direction: row;
		padding: 10px 0;
	}

	.locale-item .text {
		flex: 1;
	}

	.icon-check {
		margin-right: 5px;
		border: 2px solid #007aff;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		/* #ifndef APP-NVUE */
		transition: all 0.3s;
		/* #endif */
		transform: rotate(45deg);
	}

	.popcontentBox {
		min-height: 498px;
		background: #fff;
		background: rgba(31, 31, 31, 1);
		color: #fff;
		overflow: auto;
		padding: 40rpx;
	}

	.bottom {
		background: #fff;
		padding: 20rpx 40rpx;
	}

	// 推荐列表
	.goods-box {
		margin: 40rpx 0;

		.title {
			display: flex;
			justify-content: space-between;
			font-size: 40rpx;
			line-height: 48rpx;
		}


		.product-card-container {
			width: 240rpx;
			display: inline-block;
			margin-right: 10rpx;
		}

	}

	.robot-box {
		display: none;
		position: fixed;
		right: 40rpx;
		bottom: 176rpx;
		width: 80rpx;
		height: 80rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;

		&::before {
			background-color: #00000030;
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			filter: blur(20rpx);
			z-index: -1;
		}

		.robot-msg-box {
			position: absolute;
			bottom: calc(100% + 18rpx);
			right: 26rpx;
		}

		.robot-img {
			width: 100%;
			height: 100%;
			overflow: hidden;
			border-radius: 50%;

			>image {
				width: 150%;
				height: 150%;
				position: absolute;
				left: 50%;
				top: 66%;
				transform: translate(-50%, -50%);
			}
		}
	}
</style>